﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jquery.contextmenu.js(Jquery网页右键菜单插件）-- 当易网</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="ijquery.css" />
		<script src="jquery-1.7.2.min.js"></script>
		<script src="jquery.contextmenu.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="jquery.contextmenu.css" />
		<style type="text/css">
			.contextMenu {display:none}
		</style>
		<script type="text/javascript">
			$(function() {
				$('#txtContent').contextMenu('sysMenu',
				{ bindings:
					{
						'Li1': function(Item) {
							alert("在ID号为：" + Item.id + "编辑框中，您点击了“新建”项");
						},
						'Li2': function(Item) {
							alert("在ID号为：" + Item.id + "编辑框中，您点击了“打开”项");
						}
						//设置其它选项事件
						//...
					}
				});
			})
		</script>
	</head>
	<body>
		<div id="header">
			<h1>jquery.contextmenu.js(Jquery网页右键菜单插件）</h1>
		</div>
		<div id="container">
			
			
			
			
			
			<!--start-->
			<textarea id="txtContent" style="width:500px;height:300px;margin-top:30px;"></textarea>
			<div class="contextMenu" id="sysMenu">
				<ul>
					<li id="Li1"><img src="images/new.png" /> 新建</li>
					<li id="Li2"><img src="images/folder.png" /> 打开</li>
					<li id="Li3"><img src="images/disk.png" /> 保存</li>
					<hr />
					<li id="Li4"><img src="images/cross.png" /> 退出</li>
				</ul>
			</div>
			<!--end-->
			
			
			
			
			
		</div>
	</body>
</html>	